<template>
  <div class="home">
    <p>现在的时间是{{ time }}</p>
    <button @click="upTime">更新时间</button>

    <p>08年地震距离现在{{ filtertime }}年</p>
    <button @click="timego">时光计时器</button>

    <input type="text" v-model="form.str" />
    <p>{{ form.str }}</p>

    <button @click="jump">页面跳转</button>
  </div>
</template>
<script>
import { ref, reactive, toRefs, computed } from "vue";
import { useRouter, onBeforeRouteLeave } from "vue-router";
export default {
  name: "HomeView",
  components: {},
  setup(props) {
    // 组合api 叫 setup
    // 只要是标签上使用的方法或者变量，都需要 return 出去。
    // ref 声明基本类型响应的数据，
    // reactive 声明引入数据类型的响应式数据

    // 下面的模块就是处理时间更新的
    let time = ref(new Date().toLocaleString());
    const upTime = () => {
      time.value = new Date().toLocaleString();
      console.log(time);
    };

    //
    const data = reactive({
      year: 1,
    });
    const timego = () => {
      data.year++;
    };

    const form = ref({
      str: "",
    });

    const { push } = useRouter();
    const jump = () => {
      // console.log("cghj");
      // this.$router.push("/about");
      // console.log(form);
      // push({ path: "/about", query: { str: form.value.str } });
      push(`/about?str=${form.value.str}`);
      // console.log(this);
      // console.log(router);
    };

    // let i = 0;
    let clearTime = setInterval(() => {
      time.value = new Date().toLocaleString();
      // console.log(time);
    }, 1000);

    onBeforeRouteLeave(() => {
      // 页面离开的路由守卫
      clearInterval(clearTime);
    });

    // const filter = (val) => {
    //   // console.log(val);
    //   // return "一";
    // };

    const filtertime = computed(() => {
      let arr = ["0", "一", "二", "三", "四", "五", "六", "七", "八", "九"];
      let str = "";
      // 10
      // console.log();
      // 100  一百
      data.year
        .toString()
        .split("")
        .forEach((item) => {
          str += arr[item];
        });
      // console.log(str);
      return str;

      // .toString().toUpperCase();
    });

    return {
      time,
      upTime,
      ...toRefs(data),
      timego,
      form,
      jump,
      filtertime,
    };
  },
};
</script>
